@import "/web/css/common/main-pc";

.big-img {
    max-width: 1920px;margin: 0 auto;
    img{display: block;}
}
.main-cont{background: url("img/BG.jpg") center -60px no-repeat;padding-top: 80px;padding-bottom: 150px;}
.title-img{
    width: 500px;text-align: center;margin: 0 auto;
    img{display: inline-block;}
    &.title-img-2{margin-top: 160px;}
    &.title-img-3{margin-top: 160px;}
    &.title-img-4{margin-top: 250px;}
    &.title-img-5{margin-top: 200px;margin-bottom: 40px;}

}
.plan-container{
    height: 400px;margin-top: 66px;
    .swiper-slide{text-align: center;line-height: 400px;
        img{width: 55%;opacity: .3;vertical-align: middle;transition: 1s;}
        &.swiper-slide-active{
            img{width: auto;opacity: 1;}
        }
    }
    .plan-pagination{bottom: -4px;}
}

.explain-choice{
    width: 766px;height: 357px;background: url("./img/explain-choice-img.png");margin: 28px auto 0;font-size: 21px;text-align: center;position: relative;
    .btn{position: absolute;left: 318px;bottom: 7px;}
}

.explain-game{
    width: 766px;height: 285px;background: url("./img/explain-game-img.png");margin: 150px auto 0;font-size: 21px;text-align: center;position: relative;
    .btn{position: absolute;left: 318px;bottom: 20px;}
}

.explain-finals{
    width: 757px;height: 285px;background: url("./img/explain-finals-img.png");margin: 150px auto 0;font-size: 21px;text-align: center;position: relative;
    .btn{position: absolute;left: 318px;bottom: 20px;}
}

.video-box{
    min-width: @content;height: 529px;background: url("./img/video-box-bg.png") center top no-repeat;margin-top: 20px;box-sizing: border-box;padding-top: 36px;
    .video-black{
        width: 730px;height: 427px;margin: 0 auto;padding: 8px;box-sizing: border-box;background-color: #000;
        .video-js{width: 100%;height: 100%;overflow: hidden;
            video{object-fit: cover;}
            .vjs-big-play-button{top: 50%;left: 50%;margin-top: -20px;margin-left: -50px;}
        }
    }
}

.video-text{margin-top: 10px;
    img{margin-left: 260px;}
}

.to-sign-btn{
    width: 285px;height: 50px;background: url("./img/to-sign-up-btn.png") center top / contain no-repeat;margin: 30px auto 0;display: block;
}

.finals-explain-img{
    height: 448px;width: 100%;min-width: 1200px;background: url("./img/finals-explain-img.png") center top no-repeat;margin-top: 20px;
}

.five-scenes{
    width: 100%;min-width: @content;height: 409px;background: url("./img/five-scenes-bg.png") center top no-repeat;margin-top: 100px;
    .ul{
        position: relative;width: 1200px;margin: 0 auto;height: 100%;
        .li{width: 20%;height: 100%;float: left;position: relative;
            img{position: absolute;top: -80px;left: 13px;display: none;}
        }
        .more{
            clear: both;position: absolute;background: url("./img/five-scenes-more.png") center top / contain no-repeat;width: 280px;height: 100px;bottom: -70px;left: -20px;transition: .5s;box-sizing: border-box;
            a{display: block;height: 100px;}
        }
    }
}

.new-xiu{
    margin-top: 40px;width: 100%;min-width: @content;background: url("./img/new-xiu-cover.png") center top / 1230px auto no-repeat;padding-top: 14px;box-sizing: border-box;
    .img-box{
        height: 540px;padding: 10px 10px 10px 1px;background-color: #fff;
        .img{
            background: center / cover no-repeat;width: 386px;height: 100%;margin-left: 10px;float: left;position: relative;
            .before{position: absolute;left: 0;top: 0;bottom: 0;width: 100%;background-color: rgba(0,0,0,.5);opacity: 0;transition: .5s;}
            .after{cursor: pointer;position: absolute;left: 50%;top: 50%;width: 90px;height: 89px;background-image: url("./img/btn-player.png");margin-left: -45px;margin-top: -45px;opacity: 0;transition: .5s;}
            .arrow{
                position: absolute;width: 263px;height: 164px;background-image: url("img/new-xiu-arrow.png");top: -64px;left: 64px;display: none;
                .name{text-align: center;line-height: 32px;font-size: 20px;color: #fff;height: 32px;overflow: hidden;}
                .text{padding-top: 40px;line-height: 30px;height: 30px;font-size: 19px;color: #0f75c2;text-align: center;width: 210px;margin: 0 auto;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
                .a{width: 117px;height: 29px;background: url("img/btn-vote.png") center / contain no-repeat;display: block;margin: 5px auto 0;}
            }
            &.true{
                .before{opacity: 1;}
                .after{opacity: 1;}
                .arrow{display: block;}
            }
        }
    }
    .btn{width: 285px;height: 60px;display: block;background: url("./img/see-send-rule.png") center / contain no-repeat;margin: 40px auto 0;}
}

.video-play-box{
    width: 100%;height: 98%;
    video{height: 100%;width: 100%;background-color: #000;}
}

.report-box{
    background: url("./img/report-bg.png") center top no-repeat;height: 1000px;box-sizing: border-box;margin-top: 100px;
    .report-container{
        height: 451px;margin-top: 175px;
        .swiper-pagination-bullet{width: 15px;height: 15px;background-color: #fff;}
    }
    .swiper-slide{
        .info{
            float: left;color: #fff;width: 440px;margin-top: 20px;
            .tit{font-size: 22px;font-weight: bold;}
            .text{text-indent: 2em;margin: 35px 0 0;font-size: 16px;}
            .btn{height: 36px;display: block;width: 132px;line-height: 32px;font-size: 18px;background-color: #00589a;text-align: center;}
            .articles{
                padding-top: 10px;
                li{width: 100%;margin-top: 30px;height: 24px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
                    a{text-decoration: underline;font-size: 18px;line-height: 24px;}
                }
            }
        }
        .pic-box{
            width: 747px;float: right;box-sizing: border-box;height: 451px;padding: 20px;background-image: url("img/report-pic-bg.png");
            .pic{box-sizing: border-box;border: 8px solid #eb1c24;width: 100%;height: 100%;background-color: #fff;}
        }
    }
}

.fixed-side{
    position: fixed;width: 53px;height: 301px;top: 50%;margin-top: -150px;right: 0;background: url("./img/fixed-side.png") center / contain no-repeat;
    a{
        display: block;height: 50%;
    }
}